@import "bootstrap";
@import "bootstrap-chosen-variables";

$default-size: 15px;

/* ====================================================== Container Fluid === */

.container-fluid {
    padding: 0 !important;
}

.container-fluid .row {
    margin: 0;
}

.no-padding {
    padding: 0 !important;
}

.navbar-fixed-top + .row {
    margin-top: 45px;
}

/* ========================================================== Grid System === */

.span1, span-1,
.col1, .col-1 {
    @extend .col;
    @extend .col-lg-1;
    @extend .col-md-1;
    @extend .col-sm-1;
}

.span2, span-2,
.col2, .col-2 {
    @extend .col;
    @extend .col-lg-2;
    @extend .col-md-2;
    @extend .col-sm-2;
}

.span3, span-3,
.col3, .col-3 {
    @extend .col;
    @extend .col-lg-3;
    @extend .col-md-3;
    @extend .col-sm-3;
}

.span4, span-4,
.col4, .col-4 {
    @extend .col;
    @extend .col-lg-4;
    @extend .col-md-4;
    @extend .col-sm-4;
}

.span5, span-5,
.col5, .col-5 {
    @extend .col;
    @extend .col-lg-5;
    @extend .col-md-5;
    @extend .col-sm-5;
}

.span6, span-6,
.col6, .col-6 {
    @extend .col;
    @extend .col-lg-6;
    @extend .col-md-6;
    @extend .col-sm-6;
}

.span7, span-7,
.col7, .col-7 {
    @extend .col;
    @extend .col-lg-7;
    @extend .col-md-7;
    @extend .col-sm-7;
}

.span8, span-8,
.col8, .col-8 {
    @extend .col;
    @extend .col-lg-8;
    @extend .col-md-8;
    @extend .col-sm-8;
}

.span9, span-9,
.col9, .col-9 {
    @extend .col;
    @extend .col-lg-9;
    @extend .col-md-9;
    @extend .col-sm-9;
}

.span10, span-10,
.col10, .col-10 {
    @extend .col;
    @extend .col-lg-10;
    @extend .col-md-10;
    @extend .col-sm-10;
}

.span11, span-11,
.col11, .col-11 {
    @extend .col;
    @extend .col-lg-11;
    @extend .col-md-11;
    @extend .col-sm-11;
}

.span12, span-12,
.col12, .col-12 {
    @extend .col;
    @extend .col-lg-12;
    @extend .col-md-12;
    @extend .col-sm-12;
}

// ================================== offset

.offset1, .offset-1,
.col-offset-1 {
    @extend .col-lg-offset-1;
    @extend .col-md-offset-1;
    @extend .col-sm-offset-1;
}

.offset2, .offset-2,
.col-offset-2 {
    @extend .col-lg-offset-2;
    @extend .col-md-offset-2;
    @extend .col-sm-offset-2;
}

.offset3, .offset-3,
.col-offset-3 {
    @extend .col-lg-offset-3;
    @extend .col-md-offset-3;
    @extend .col-sm-offset-3;
}

.offset4, .offset-4,
.col-offset-4 {
    @extend .col-lg-offset-4;
    @extend .col-md-offset-4;
    @extend .col-sm-offset-4;
}

.offset5, .offset-5,
.col-offset-5 {
    @extend .col-lg-offset-5;
    @extend .col-md-offset-5;
    @extend .col-sm-offset-5;
}

.offset6, .offset-6,
.col-offset-6 {
    @extend .col-lg-offset-6;
    @extend .col-md-offset-6;
    @extend .col-sm-offset-6;
}

.offset7, .offset-7,
.col-offset-7 {
    @extend .col-lg-offset-7;
    @extend .col-md-offset-7;
    @extend .col-sm-offset-7;
}

.offset8, .offset-8,
.col-offset-8 {
    @extend .col-lg-offset-8;
    @extend .col-md-offset-8;
    @extend .col-sm-offset-8;
}

.offset9, .offset-9,
.col-offset-9 {
    @extend .col-lg-offset-9;
    @extend .col-md-offset-9;
    @extend .col-sm-offset-9;
}

.offset10, .offset-10,
.col-offset-10 {
    @extend .col-lg-offset-10;
    @extend .col-md-offset-10;
    @extend .col-sm-offset-10;
}

.offset11, .offset-11,
.col-offset-11 {
    @extend .col-lg-offset-11;
    @extend .col-md-offset-11;
    @extend .col-sm-offset-11;
}

.offset12, .offset-12,
.col-offset-12 {
    @extend .col-lg-offset-12;
    @extend .col-md-offset-12;
    @extend .col-sm-offset-12;
}

/* =========================================================== Alignments === */

.align-left {
    text-align: left
}
.align-center {
    text-align: center;
}
.align-right {
    text-align: right;
}

/* ================================================= Paddings and Margins === */

.padding-left {
    padding-left: $default-size;
}

.padding-right {
    padding-rigth: $default-size;
}

.padding-top {
    padding-top: $default-size;
}

.padding-bottom {
    padding-bottom: $default-size;
}

.padding-tb {
    padding-top: $default-size;
    padding-bottom: $default-size;
}

.padding-lr {
    padding-left: $default-size;
    padding-rigth: $default-size;
}

.padding {
    padding: $default-size;
}

.no-padding-left {
    padding-left: 0;
}

.no-padding-rigth {
    padding-right: 0;
}

.no-padding-top {
    padding-top: 0;
}

.no-padding-bottom {
    padding-bottom: 0;
}

.no-padding-lr {
    padding-right: 0;
    padding-left: 0;
}

.no-padding-tb {
    padding-top: 0;
    padding-bottom: 0;
}

.no-padding {
    padding: 0;
}

.panel-toggle {
    cursor: pointer;
    margin-right: 2px;
}

// draggable handles
.handle:hover {
    cursor: move;
}



/* =============================================================== Chosen === */
.chosen-select { width: 100%; }
.chosen-select-deselect { width: 100%; }

.chosen-container {
    display: inline-block;
    font-size: $font-size-base;
    position: relative;
    vertical-align: middle;
    
    .chosen-drop {
        background: $chosen-background;
        border: 1px solid $chosen-drop-border;
        border-top-color: lighten($chosen-drop-border, 25%);
        @include border-bottom-radius($chosen-border-radius);
        @include box-shadow($chosen-drop-box-shadow);
        margin-top: -1px;
        position: absolute;
        top: 100%;
        left: -9000px;
        z-index: $chosen-drop-zindex;
    }
    
    &.chosen-with-drop .chosen-drop {
        left: 0;
        right: 0;
    }
    
    .chosen-results {
        color: $gray;
        margin: 0 4px 4px 0;
        max-height: 240px;
        padding: 0 0 0 4px;
        position: relative;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        
        li {
            display: none;
            line-height: $line-height-base; // 15px;
            list-style: none;
            margin: 0;
            padding: 5px 6px;
            
            em {
                background: #feffde;
                font-style: normal;
            }
            
            &.group-result {
                display: list-item;
                cursor: default;
                color: #999;
                font-weight: bold;
            }
            
            &.group-option {
                padding-left: 15px;
            }
            
            &.active-result {
                cursor: pointer;
                display: list-item;
            }
            
            &.highlighted {
                background-color: $link-color;
                color: white;
                
                em {
                    background: transparent;
                }
            }
            
            &.disabled-result {
                display: list-item;
                color: $gray-light;
            }
        }
        
        .no-results {
            background: $gray-lighter;
            display: list-item;
        }
    }
    
    .chosen-results-scroll {
        background: white;
        margin: 0 4px;
        position: absolute;
        text-align: center;
        width: 321px;
        z-index: 1;
        
        span {
            display: inline-block;
            height: $line-height-base; // 17px;
            text-indent: -5000px;
            width: 9px;
        }
    }
    
    .chosen-results-scroll-down {
        bottom: 0;
        
        span {
            background: url($chosen-sprite-path) no-repeat -4px -3px;
        }
    }
    
    .chosen-results-scroll-up {
        span {
            background: url($chosen-sprite-path) no-repeat -22px -3px;
        }
    }
}

.chosen-container-single {
    .chosen-single {
        background-color: $chosen-background;
        @include gradient-vertical(white, $gray-lighter);
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
        border: 1px solid $chosen-border;
        @include box-shadow($chosen-box-shadow);
        color: $gray;
        display: block;
        height: $chosen-height;
        overflow: hidden;
        line-height: $chosen-height;
        padding: 0 0 0 8px;
        position: relative;
        text-decoration: none;
        white-space: nowrap;
        
        span {
            display: block;
            margin-right: 26px;
            @include text-overflow();
        }
        
        abbr {
            background: url($chosen-sprite-path) right top no-repeat;
            display: block;
            font-size: 1px;
            height: 10px;
            position: absolute;
            right: 26px;
            top: ($chosen-height - 10px) / 2;
            width: 12px;
            
            &:hover {
                background-position: right -11px;
            }
        }
        
        &.chosen-disabled .chosen-single abbr:hover {
            background-position: right 2px;
        }
        
        div {
            display: block;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            width: 18px;
            
            b {
                background: url($chosen-sprite-path) no-repeat 0 7px;
                display: block;
                height: 100%;
                width: 100%;
            }
        }
    }
    
    .chosen-default {
        color: $gray-light;
    }
    
    .chosen-search {
        margin: 0;
        padding: 3px 4px;
        position: relative;
        white-space: nowrap;
        z-index: $zindex-dropdown;
        
        input {
            background: url($chosen-sprite-path) no-repeat 100% -20px, $chosen-background;
            border: 1px solid $chosen-border;
            @include border-top-radius($chosen-border-radius);
            @include border-bottom-radius($chosen-border-radius);
            @include box-shadow($chosen-box-shadow);
            margin: 1px 0;
            padding: 4px 20px 4px 4px;
            width: 100%;
        }
    }
    
    .chosen-drop {
        margin-top: -1px;
        @include border-bottom-radius($chosen-border-radius);
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
    }
}

.chosen-container-single-nosearch {
    .chosen-search {
        input {
            position: absolute;
            left: -9000px;
        }
    }
}

.chosen-container-multi {
    .chosen-choices {
        background-color: $chosen-background;
        border: 1px solid $chosen-border;
        @include border-top-radius($chosen-multi-border-radius);
        @include border-bottom-radius($chosen-multi-border-radius);
        @include box-shadow($chosen-box-shadow);
        cursor: text;
        height: auto !important;
        height: 1%;
        margin: 0;
        overflow: hidden;
        padding: 0;
        position: relative;
        
        li {
            float: left;
            list-style: none;
        }
        
        .search-field {
            margin: 0;
            padding: 0;
            white-space: nowrap;
            
            input {
                background: transparent !important;
                border: 0 !important;
                @include box-shadow(none);
                color: $gray;
                height: $chosen-multi-height - 8px;
                margin: 0;
                padding: 4px;
                outline: 0;
            }
            
            .default {
                color: #999;
            }
        }
        
        .search-choice {
            -webkit-background-clip: padding-box;
            -moz-background-clip: padding;
            background-clip: padding-box;
            background-color: $gray-lighter;
            border: 1px solid $chosen-border;
            @include border-top-radius($chosen-border-radius);
            @include border-bottom-radius($chosen-border-radius);
            @include gradient-vertical(white, $gray-lighter);
            @include box-shadow($chosen-box-shadow);
            color: $gray-dark;
            cursor: default;
            line-height: 13px;
            margin: 6px 0 3px 5px;
            padding: 3px 20px 3px 5px;
            position: relative;
            
            .search-choice-close {
                background: url($chosen-sprite-path) right top no-repeat;
                display: block;
                font-size: 1px;
                height: 10px;
                position: absolute;
                right: 4px;
                top: 5px;
                width: 12px;
                
                &:hover {
                    background-position: right -11px;
                }
            }
        }
        
        .search-choice-focus {
            background: #d4d4d4;
            
            .search-choice-close {
                background-position: right -11px;
            }
        }
    }
    
    .chosen-results {
        margin: 0 0 0 0;
        padding: 0;
    }
    
    .chosen-drop {
        .result-selected {
            display: none;
        }
    }
}

.chosen-container-active {
    .chosen-single {
        border: 1px solid $chosen-focus-border;
        @include box-shadow($chosen-focus-box-shadow);
        @include transition($chosen-focus-transition);
    }
    
    &.chosen-with-drop .chosen-single {
        background-color: $gray-lighter;
        border: 1px solid $chosen-focus-border;
        @include box-shadow($chosen-focus-box-shadow);
        @include transition($chosen-focus-transition);
        
        div {
            background: transparent;
            border-left: none;
            
            b {
                background-position: -18px 7px;
            }
        }
    }
    
    .chosen-choices {
        border: 1px solid $chosen-focus-border;
        @include border-bottom-radius(0);
        @include box-shadow($chosen-focus-box-shadow);
        @include transition($chosen-focus-transition);
        
        .search-field input {
            color: #111 !important;
        }
    }
}

.chosen-disabled {
    cursor: default;
    opacity: 0.5 !important;
    
    .chosen-single {
        cursor: default;
    }
    
    .chosen-choices .search-choice .search-choice-close {
        cursor: default;
    }
}

.chosen-rtl {
    text-align: right;
    
    .chosen-single {
        padding: 0 8px 0 0;
        overflow: visible;
        
        span {
            margin-left: 26px;
            margin-right: 0;
            direction: rtl;
        }
        
        div {
            left: 7px;
            right: auto;
        }
        
        abbr {
            left: 26px;
            right: auto;
        }
    }
    
    .chosen-choices {
        .search-field input {
            direction: rtl;
        }
        
        li {
            float: right;
        }
        
        .search-choice {
            margin: 6px 5px 3px 0;
            padding: 3px 5px 3px 19px;
            
            .search-choice-close {
                background-position: right top;
                left: 4px;
                right: auto;
            }
        }
    }
    
    &.chosen-container-single .chosen-results {
        margin: 0 0 4px 4px;
        padding: 0 4px 0 0;
    }
    
    .chosen-results .group-option {
        padding-left: 0;
        padding-right: 15px;
    }
    
    &.chosen-container-active.chosen-with-drop .chosen-single div {
        border-right: none;
    }
    
    .chosen-search input {
        background: url($chosen-sprite-path) no-repeat -28px -20px, $chosen-background;
        direction: rtl;
        padding: 4px 5px 4px 20px;
    }
}